<template>
  <div class="D_content">
    <div class="title"><span class="title_left">D8</span><span class="title_right">经验分享与应用排查</span></div>
    <div class="bottom">
      <!-- 扩展排查 -->
      <div class="bot_con">
        <span class="bc_title">扩展排查</span>
        <div class="list_con">
          <div class="cons" v-for="(item,index) in factorys">
            <div class="cons_top">
              <div class="ct_name">
                <span class="f_name">{{item.name}}</span>
                <span class="f_type">已通知</span>
              </div>
            </div>
            <div class="cons_bottom">
              <span class="cb_tabs" @click="changeBool(item.user,1,index)">人员[{{sureBool(item.user)}}]</span>
              <span class="cb_tabs" @click="changeBool(item.equipment,2,index)">设备[{{sureBool(item.equipment)}}]</span>
              <span class="cb_tabs" @click="changeBool(item.material,3,index)">材料[{{sureBool(item.material)}}]</span>
              <span class="cb_tabs" @click="changeBool(item.routing,4,index)">工艺[{{sureBool(item.routing)}}]</span>
            </div>
          </div>
          <div class="cons_add" @click="addFactory">
            <i class="el-icon-plus"></i>
            <span>添加工厂</span>
          </div>
        </div>
      </div>
      <!-- 供应商围堵跟踪表 -->
      <div class="bot_con"  v-if="supplyers.length > 0">
        <span class="bc_title">供应商围堵跟踪表</span>
        <div class="supplier" v-for="(item,index) in supplyers" :style="index == supplyers.length - 1?'margin-bottom: 30px':'margin-bottom: 0;border-bottom:none'">
          <div class="sup_top">
            <div class="sup_title">
              <span class="st_title">{{item.name}}</span>
              <!--<span class="title_upstate" @click="sup_upstate(index)">修改</span>-->
              <!--<span class="title_delete" @click="sup_delete(index)">删除</span>-->
            </div>
            <div class="getHtml" v-html="item.desc"></div>
          </div>
        </div>
      </div>
      <!-- 项目标签 -->
      <div class="bot_con" v-if="tags.length == 0">
        <span class="bc_title">项目标签</span>
        <div class="bc_noCon" @click="openChooseTabs"><i class="el-icon-plus"></i>添加新标签</div>
      </div>
      <div class="bot_con" v-else>
        <span class="bc_title">项目标签</span>
        <div class="tabList">
          <div class="tabs" v-for="(item,index) in tags">{{item}}</div>
          <div class="addTabs" @click="openChooseTabs">
            <i class="el-icon-plus"></i>
            <span>添加新标签</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 按钮组 -->
    <div class="button">
      <el-button type="primary" @click="submit" style="height: 40px">确认</el-button>
    </div>
    <changeBool v-if="showChangeBool" :boolindex="boolindex" :boolValue="boolValue" :boolParIndex="boolParIndex" @changeBack="changeBack"></changeBool>
    <chooseFactory v-if="showChooseFactory" :factorys="factorys" @chooseBack="chooseBack"></chooseFactory>
    <chooseTabs v-if="showchooseTabs" :tags="tags" @chooseBack="chooseTabsBack"></chooseTabs>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import changeBool from '../../../dialog/changeBool'
  import chooseFactory from '../../../dialog/chooseFactory'
  import chooseTabs from '../../../dialog/chooseTabs'
  export default {
    name: "D_eight",
    data() {
      return {
        detail:null, //查询出来的详情
        factorys: [], //工厂列表
        supplyers: [], //供应商列表
        tags: [], //标签列表
        boolValue:'', //修改工厂状态的值
        boolindex:'', //修改工厂状态的下标 1：人员 2：设备 3：材料 4：工艺
        boolParIndex: '', //修改工厂所在数组的下标(用于返回判断替换)
      }
    },
    computed:{
      ...mapGetters([
        'showChangeBool',
        'showChooseFactory',
        'showchooseTabs',
        'publicD4Par'
      ])
    },
    components:{
      changeBool,
      chooseFactory,
      chooseTabs
    },
    created() {
      let self = this
    },
    mounted() {
      let self = this
      if (self.$route.query.id != undefined){
        self.searchDetailEightD(self.$route.query.id)
      }else {
        self.detail = self.$route.query.pro
      }
      if (self.publicD4Par != undefined && self.publicD4Par != null && self.publicD4Par.length > 0){
        self.supplyers = self.publicD4Par
      }
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //查询8D详情
      searchDetailEightD(id){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
          self.detail = res.data
          self.factorys = self.detail.data.factorys
          self.supplyers = self.detail.data.supplyers
          self.tags = self.detail.data.tags
        })
      },
      //工厂状态确认
      sureBool(item){
        let self = this
        if (item == null || item == '' || item == undefined){
          return '待确认'
        }else {
          return '已确认'
        }
      },
      //更改工厂状态
      changeBool(item,ind,index){
        let self = this
        self.boolValue = item
        self.boolindex = ind
        self.boolParIndex = index
        self.upstate({key:'showChangeBool',val:true})
      },
      //修改工厂状态的返回值
      changeBack(par){
        let self = this
        switch (par.boolindex) {
          case 1:
            self.factorys[par.boolParIndex].user = par.boolValue
            break
          case 2:
            self.factorys[par.boolParIndex].equipment = par.boolValue
            break
          case 3:
            self.factorys[par.boolParIndex].material = par.boolValue
            break
          case 4:
            self.factorys[par.boolParIndex].routing = par.boolValue
            break
        }
      },
      //添加工厂
      addFactory(){
        let self = this
        self.upstate({key:'showChooseFactory',val:true})
      },
      //添加工厂的返回值
      chooseBack(par){
        let self = this
        let list = []
        for (let i = 0; i < par.length; i++){
          let newObj = {
            check:true,
            equipment:null,
            isCheck:true,
            material:null,
            name:par[i],
            recyclerType:0,
            routing:null,
            user:null,
          }
          list.push(newObj)
        }
        self.factorys = list
      },
      //添加标签
      openChooseTabs(){
        let self = this
        self.upstate({key:'showchooseTabs',val:true})
      },
      //标签返回值
      chooseTabsBack(par){
        let self = this
        self.tags = par
      },
      //确认提交
      submit(){
        let self = this
        self.upstate({key: 'public_backShow',val: true})
        let edReportIds='';
        if (self.$route.query.edReportId != undefined && self.$route.query.edReportId != "undefined" && self.$route.query.edReportId != 0){
          edReportIds = self.$route.query.edReportId;
        }else if(self.detail.id !== undefined && self.detail.id !== ''&& self.detail.id != 0){
          edReportIds = self.detail.id
        }else {
          edReportIds='';
        }
        if (self.$route.query.id == undefined){ //新建8D
          let par = {
            creator: localStorage.getItem('userName'),
            data:{
              factorys: self.factorys,
              supplyers:{},
              tags: self.tags
            },
            edReportId: edReportIds,
            type:'D8',
          }
          self.$http.post(self.conURL + 'mongo/api/eddocs',par).then(res => {
            this.$notify({
              title: '成功',
              message: '8D文件创建成功',
              type: 'success'
            });
            self.$route.matched[1].instances.default.$data.pro.edReport.reportId.push(res.data.id)
            self.upstate({key: 'public_backShow',val: false})
            this.$router.push('/index/important')
          }).catch(error=>{
            console.log(error)
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          });
        }else {
          let par = {
            creator: localStorage.getItem('userName'),
            data:{
              factorys: self.factorys,
              supplyers:{},
              tags: self.tags
            },
            edReportId: edReportIds,
            id: self.detail.id,
            type:'D8',
          }
          self.$http.post(self.conURL + 'mongo/api/eddocs/update',par).then(res => {
            this.$notify({
              title: '成功',
              message: '修改8D文件成功',
              type: 'success'
            });
            self.upstate({key: 'public_backShow',val: false})
            this.$router.push('/index/important')
          }).catch(error=>{
            console.log(error)
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          });
        }
      },
    }
  }
</script>

<style lang="less">
  .D_content{
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 33px 28px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-top: none;
    .title{
      width: 100%;
      line-height: 24px;
      color: #2d7ede;
      .title_left{
        font-size: 24px;
        margin-right: 10px;
      }
      .title_right{
        font-size: 24px;
      }
    }
    .bottom{
      display: flex;
      flex-direction: column;
      width: 100%;
      .bot_con{
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        border-bottom: 1px dashed #e5e5e5;
        .bc_title{
          font-size: 18px;
          line-height: 18px;
          color: #333333;
          text-align: left;
          margin-bottom: 17px;
          span{
            font-size: 16px;
            color: #3384dd;
            line-height: 18px;
            margin-left: 20px;
            cursor: pointer;
          }
        }
        .bc_noCon{
          width: 100%;
          height: 62px;
          line-height: 64px;
          text-align: center;
          border: 1px dashed #e5e5e5;
          background: #f9f9f9;
          font-size: 18px;
          color: #2d7ede;
          margin-bottom: 30px;
          cursor: pointer;
          i{
            margin-right: 10px;
          }
        }
        .list_con{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .cons{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 31%;
            border: 1px solid #eee;
            box-shadow: #f8f8f9 0px 0px 15px;
            margin-right: 20px;
            margin-bottom: 20px;
            .cons_top{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              .ct_name{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                padding: 29px 24px;
                box-sizing: border-box;
                border-bottom: 1px solid #eeeeee;
                .f_name{
                  font-size: 20px;
                  color: #222222;
                  font-weight: 600;
                  display: block;
                  margin: auto 0;
                }
                .f_type{
                  padding: 8px 10px;
                  color: #fff;
                  font-size: 14px;
                  background: #4eb240;
                  border-radius: 3px;
                }
              }
            }
            .cons_bottom{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              padding: 12px 29px;
              box-sizing: border-box;
              background: #fafafa;
              .cb_tabs{
                font-size: 14px;
                color: #2d7ede;
                margin-right: 10px;
                cursor: pointer;
              }
              .cb_tabs:last-child{
                margin-right: 0;
              }
            }
          }
          .cons_add{
            width: 164px;
            min-height: 156px;
            position: relative;
            border: 1px solid #eee;
            border-radius: 3px;
            margin-right: 20px;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: #f8f8f9 0px 0px 15px;
            cursor: pointer;
            i{
              font-size: 45px;
              font-weight: 600;
              color: #3384dd;
              margin: 0 auto;
            }
            span{
              text-align: center;
              margin-top: 8px;
              font-size: 16px;
              color: #3384dd;
            }
          }
        }
        .supplier{
          display: flex;
          flex-direction: column;
          width: 100%;
          border: 1px solid #e5e5e5;
          border-bottom: none;
          margin-bottom: 30px;
          .sup_top{
            padding: 20px 18px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #e5e5e5;
            .sup_title{
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              .st_title{
                width: auto;
                margin-right: 10px;
                font-size: 18px;
                color: #222222;
                line-height: 18px;
                font-weight: 500;
              }
              .title_upstate{
                font-size: 16px;
                color: #2d7ede;
                line-height: 18px;
                cursor: pointer;
                margin-right: 10px;
              }
              .title_delete{
                font-size: 16px;
                color: #ef4a4e;
                line-height: 18px;
                cursor: pointer;
              }
            }
          }
          .sup_bottom{
            width: 100%;
            height: 54px;
            line-height: 54px;
            display: flex;
            flex-direction: row;
            padding: 0 18px;
            box-sizing: border-box;
            cursor: pointer;
            .el-icon-plus{
              font-size: 20px;
              color: #2d7ede;
              margin-top: auto;
              margin-bottom: auto;
              margin-right: 5px;
            }
            .span{
              color: #2d7ede;
              font-size: 18px;
            }
          }
          .getHtml{
            .imgs{
              cursor: pointer;
            }
            p{
              margin: 0;
            }
            .ql-align-center{
              text-align: center;
            }
            .ql-align-right{
              text-align: right;
            }
            .Damon:active{
              position: fixed;
              margin: auto;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              width: 30%;
              height: 30%;
            }
          }
        }
        .tabList{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .tabs{
            font-size: 16px;
            color: #555555;
            border: 1px solid #e5e5e5;
            padding: 8px 18px;
            margin-right: 10px;
            margin-bottom: 10px;
          }
          .addTabs{
            display: flex;
            flex-direction: row;
            cursor: pointer;
            i{
              font-size: 16px;
              color: #2d7ede;
              margin-right: 5px;
              /*margin-top: auto;*/
              /*margin-bottom: auto;*/
              line-height: 41px;
            }
            span{
              font-size: 16px;
              color: #2d7ede;
              line-height: 39px;
            }
          }
        }
      }
      .bot_con:last-child{
        border-bottom: none;
      }
    }
    .button{
      display: flex;
      flex-direction: row;
    }
  }
</style>
